<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top ">
      <div class="main" >
        <div class="topDiv fs-28 mb-24 pd-24">
          <div class="fw-b title">基础信息</div>
          <div class="flex-s-s mt-20 ptb-5">
            <div>商户名称</div>
            <div class="color3 fw-b">{{orderData.BusinessName}}</div>
          </div>
          <!-- <div class="flex-s-s  ptb-5">
            <div>单据类型</div>
            <div class="color3 fw-b">销售出库单</div>
          </div> -->
          <div class="flex-s-s  ptb-5">
            <div>开单时间</div>
            <div class="color3 fw-b">{{orderInfo.AddTime}}</div>
          </div>
          <div class="flex-s-s  ptb-5">
            <div>单据金额</div>
            <div class="color3 fw-b">¥{{orderInfo.PriceSum}}</div>
          </div>
        </div>
        <div class="pd-32 wrapper" ref="imgContent">
          <div class="top">{{storeData.Name}}</div>
          <div class="address">地址：{{DetailAddress}}/电话：{{storeData.ContactTel}}</div>
          <div class="song">送货单</div>
          <div class="info">
            <div>客户名称：{{orderInfo.RealName}}</div>
            <div>订单编号：{{orderInfo.Sn}}</div>
            <div>收货地址：{{orderInfo.Address}}</div>
            <div>报价时间：{{orderInfo.AddTime}}</div>
            <div>联系人：{{orderInfo.ContactName}} {{orderInfo.ContactTel}}</div>
            <div>业务员： {{saleData.RealName}} {{saleData.Tel}}</div>
          </div>
          <div class="biao mt-10">
            <div style="width: 50px;">序号</div>
            <div style="width: 350px;">商品名称</div>
            <div style="width: 90px;">单价</div>
            <div style="width: 90px;">数量</div>
            <div style="width: 90px;">小计</div>
          </div>
          <div class="biao dr" v-for="(item,index) in orderInfo.DetailList" :key="item.ID">
            <div style="width: 50px;" class="pl-10">{{index+1}}</div>
            <div style="width: 350px;">{{item.Name}}</div>
            <div style="width: 90px;">{{item.Price * item.Weight}}</div>
            <div style="width: 90px;">{{item.Amount}}</div>
            <div style="width: 90px;">{{(item.PriceSum).toFixed(2)}}</div>
          </div>
          <div class="heji">商品合计：{{orderInfo.ProductPrice}}元，运费：{{orderInfo.PostagePrice}}元，合计：{{orderInfo.PriceSum}}元</div>
          <!-- <div class="bot pt-8">客户备注：产品创造于工厂，而品牌创造于心灵</div> -->
          <div class="bot bot1 pb-8" v-if="orderInfo.Remark">订单备注：{{orderInfo.Remark}}</div>
        </div>
      </div>
      <div class="footer">
        <div class="btn" @click="replaceToImg">下载单据</div>
      </div>
      <van-dialog v-model="posterShow" class="posterDiv color-white" :showConfirmButton="false">
      <div class="pos-r">
        <img v-show="replaceImg" :src="replaceImg" class="posterimg" />
        <div class="pt-20 fs-34 flex-center">长按图片保存</div>
        <SvgIcon icon-class="close" class="fs-70 pos-close z-out" @goPage="close" />
      </div>
    </van-dialog>
    </div>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import contentSearch from 'components/contentSearch'
import noData from 'components/noData'
import productList from 'components/productList'
import datetimeFilter from 'components/datetimeFilter'
import { GetWriteoffRecordPage } from 'api/writeoff'
import { GetUserPageFromStore, GetStoreMemberTotal,GetMemberFormId } from 'api/member'
import { GetStoreInfo } from 'api/store'
import imgBox from 'components/imgBox'
import { 		GetCashierLog,
		UseScanQRPay,
		GetOrUpdatePayUser,
		GetCouponUpdatePayUser,
		UseCashPay,
		GetBankList,
		GetFillOrderPayType} from 'api/cashier'
import { getInitWebInfo} from 'api/web'
import {
		GetBusinessFunction
	} from "api/businessSetting.js"
import { GetOrderDetail} from 'api/order'
import jrQrcode from "jr-qrcode";
import html2canvas from 'html2canvas'
export default {
  components: {
    contentSearch,
    noData,
    productList,
    datetimeFilter,
    imgBox,
    SvgIcon,

  },
  data() {
    return {
      // 记录列表
      productList: [],
			title: '单据详情',
			type: 0,
      radio:'1',
      tradeno:'',
      data:{},
				paymentShow:false,
				userNumber: '',
				fromtype:null,
				domain:'',
				webinfo:{},
				payTicksTime:null,
				paytypelist:'',
				Userinfo:{},
				switchnum:1,
        xianjin:false,
        balance:false,
        orderId:"",
        replaceImg:'',
        posterShow:false,
        orderInfo:{},
        orderData:{},
        DetailAddress:'',
        storeData:{},
        saleData:{}
    }
  },
  created() {
      this.orderId = this.$route.query.orderId
      this.GetOrderDetail()
  },
  mounted() {

  },
  methods: {
    close(){
      console.log(11111)
      this.posterShow = false

    },
    replaceToImg(){
      this.$toast.loading({
        message: 'loading...',
        loadingType: 'spinner',
        duration: 0
      })
      let imgContent;
      imgContent =this.$refs.imgContent;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      let width;
      let height;
      width = imgContent.clientWidth 
      height = imgContent.clientHeight 
      this.$nextTick(()=>{
        setTimeout(() => {
          html2canvas(imgContent, {
            backgroundColor: null,
            allowTaint: true,
            logging: true, // 日志开关，便于查看html2canvas的内部执行流程
            width: width, // dom 原始宽度
            height: height,
            scrollY: 0,
            scrollX: 0,
            useCORS: true // 图片跨域
          }).then(canvas => {
            const url = canvas.toDataURL('image/png').replace("image/png","image/octet-stream");
            this.replaceImg = url
            console.log(this.replaceImg)
            this.$toast.clear()
            this.posterShow = true
          }).catch(error => {
            console.error('html2canvas 错误:', error);
          });
        }, 1000)
      });
    },
    GetOrderDetail() {
      GetOrderDetail({orderId:this.orderId}).then(res => {
        console.log(res)
        if (res.State == 1) {
          this.orderData = res.Data;
          this.orderInfo = res.Data.OrderDetail;
          this.GetStoreInfo(this.orderInfo.StoreId)
          this.GetMemberFormId(this.orderInfo.SaleUserId)
        }
      })
    },
    GetStoreInfo(id) {
      GetStoreInfo({Id:id}).then(res => {
        if (res) {
          const _this = this
          const _data = res.Data
          const _province = _data.ProvinceName || ''
          const _city = _data.CityName || ''
          const _detailAddress = _data.ContactAddress || ''
          const RegionName =  _data.RegionName || ''
          const StreetName =  _data.StreetName || ''
          this.storeData = res.Data
          this.DetailAddress = _province + _city + _detailAddress+RegionName+StreetName
  
        }
      })
    },
    GetMemberFormId(id) {
      GetMemberFormId({userId:id}).then(res => {
        if (res) {
          this.saleData = res.Data
        }
      })
    },
    payment(){
				//跳转线下支付页
		},
    goto(){
      this.$router.push({
        path: '/bills'
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.van-hairline--bottom::after{
  border-bottom-width:0;
}
.color-red{
  color: #F1270C;
}
.tag{
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #FFF2F0;
  color: #F1270C;
  border-radius: 4px;

}
.topDiv{
  color: #333;
  background: #fff;
  padding-bottom: 120px;
}
.title{
    height: 88px;
    line-height: 88px;
    border-bottom: 1px solid #F0F0F0;
  }
  .color3{
    color: #333;
  }
.wrapper{
  background: #fff;
  color: #333333;
}
.top{
  font-size: 23px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
}
.address{
  font-size: 13px;
  color: #333333;
  padding-bottom: 12px;
  text-align: center;
  border-bottom: 1px solid #979797;
}
.song{
  font-size: 23px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 10px;
}
.info{
  display: flex;
  flex-wrap: wrap;
}
.info div{
  font-size: 13px;
  width: 50%;
}
.biao{
  font-size: 13px;
  height: 40px;
  line-height: 40px;
  background: #F2F3F5;
  font-weight: bold;
  display: flex;
  border-bottom: 1px solid #E5E6EB;
}
.dr{
  background: #fff;
}
.heji{
  height: 40px;
  line-height: 40px;
  font-weight: normal;
  font-size: 15px;
  color: #333333;
  font-weight: bold;
  text-align: right;
  border-bottom: 1px solid #E5E6EB;
}
.bot{
  font-size: 13px;
  color: #333333;
}
.bot1{
  border-bottom: 1px solid #E5E6EB;

}
.footer{
  width: 750px;
  height: 120px;
  background: #FFFFFF;
  box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.1);
  padding-top: 20px;
  position: fixed;
  left: 0;
  bottom: 0;
}
.btn{
  width: 220px;
  height: 80px;
  line-height: 80px;
  background: #F1270C;
  border-radius: 45px;
  font-size: 32px;
  color: #FFFFFF;
  margin:0px auto;
  text-align: center;
}
.posterDiv {
  width: 700px;
  background: none;
  overflow: visible;
  top: 50%;
}
.posterimg {
  width: 100%;
  background: transparent!important;
  // border-radius: 16px;
}
.pos-close{
  margin: 30px auto 0 auto;
  display: flex;
  justify-content: center;
}
</style>
